<template>
    <main-layout>
        <div class="mine">
            <img src="../../images/set.png" alt="" class="set">
            <div class="userInfo">
                <div class="headPic">
                    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F17%2F20200217181253_NNY3y.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648385293&t=cfdd4ea26b81d2b9ae9f97343a902fac" alt="">
                </div>
                <p>{{userName}}</p>
                <span>{{sign}}</span>
            </div>
            <div class="socialInfo">
                <div>
                  <span class="nums">{{fansNum}}</span>  
                   <span class="socials">粉丝</span> 
                </div>
                <div>
                    <span class="nums">{{praiseNum}}</span>  
                   <span class="socials">获赞</span>
                    
                </div>
                <div>
                    <span class="nums">{{attentionNum}}</span>  
                   <span class="socials">关注</span>
                </div>
            </div>

            <p>我的作品({{this.worksNum}})</p>

            <div class="works">
                <div v-for="item in myWorksList" :key="item.img" class="myWorks">
                    <img :src="item.img" alt="">
                    <p>{{item.title}}</p>
                </div>
            </div>
        </div>
       
    </main-layout>
</template>

<script>
    import myWorks from '../../mockdata/mockMyworks'
    export default {
        data(){
            return {
                //用户昵称
                userName:'神厨小福贵',
                //个性签名
                sign:'大家好，我是神厨小福贵',
                fansNum:'99',
                praiseNum:'100',
                attentionNum:'23',
                //作品数
                worksNum:'',
                myWorksList:[]
            }
        },
        created () {
            this.getMyworks()
        },
        methods:{
            //获取我的作品数据
            async getMyworks(){
                let result = await myWorks.getWorksApi()
                if (result.code === 200) {
                    this.worksNum = result.data.total
                    console.log(this.worksNum);
                    this.myWorksList = result.data.row.map((item) => {
                        return item
                    })
                }
            }
        }
    }
</script>


<style lang="less" scoped>
    .mine {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        .set {
            width: 38px;
            height: 38px;
            position: absolute;
            top: 5px;
            right: 5px;
        }
        .userInfo {
            width: 250px;
            height: 250px;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 60px;
                >.headPic {
                width: 100px;
                height: 100px;
                border-radius: 50% ;
                overflow: hidden;
                    > img {
                        width: 100px;
                        height: 100px;
                    }
                }

                p {
                    font-size: 20px;
                    color: black;
                    
                }

                span {
                    font-size: 16px;
                    color: grey;
                }
        }

        .socialInfo {
            width: 100%;
            display: flex;
            justify-content: space-around;

            > div {
                display: flex;
                flex-direction: column;
                text-align: center;
            }
            .nums{
                font-size: 28px;
                color: black;
            }
            .socials {
                font-size: 16px;
                color: grey;
            }
        }
        
        .works {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            > .myWorks {
                width: 180px;
                box-shadow: 20px,10px,10px,rgb(233, 14, 50);
                > img {
                    width: 170px;
                    height: 170px;
                    border-radius: 10%;
                }
                
                > p {
                    font-size:16px; 
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
        

    }
</style>